<template>
    <div id="conferenceRoom">
        <div class="header">
            <input type="search" class="chat-search" placeholder="  搜索会议关键字" v-model="getByEmpName" />
            <p class="chat-pic"><i class="el-icon-search"></i></p>
            <el-badge :value="12" class="chat-msg">
                <router-link to="/" class="chat-msg-1">
                    <i class="el-icon-bell" style="color:blue;"></i> 消息
                </router-link>
            </el-badge>
        </div>
        <div class="meeting">
            <p class="meet-title">待办提醒</p>
            <div class="meet-reminder">
                <p class="meet-num">1</p>
                <p>关于本月绩效未达标人员处理</p>
                <p>发起人:张志超</p>
                <p>2023年4月13日</p>
                <p>10分钟后开始会议</p>
                <button class="join" @click="join"><i class="el-icon-phone"></i>  立即加入</button>
            </div>
        </div>

        <div class="meetNow">
            <p class="meetNow-title">今日会议</p>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>

        <div class="meetTemplate">
            <p>模板</p>
            <button><i class="el-icon-folder-add"></i> 新建模板</button>
            <ul>
                <li>
                    <p>每日例会——示例演示</p>
                    <p>会议日期:10:00至11:00   参会人员:陈伟，陈丹，常量，凌军...   会前提醒：无提醒</p>
                    <button id="bianji">编辑</button>
                    <button id="shanchu">删除</button>
                    <button id="yuyue">预约</button>
                </li>
                <li>
                    <p>每周例会——示例演示</p>
                    <p>会议日期:10:00至11:00   参会人员:陈伟，陈丹，常量，凌军...   会前提醒：无提醒</p>
                    <button id="bianji">编辑</button>
                    <button id="shanchu">删除</button>
                    <button id="yuyue">预约</button>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

export default ({
    name:"ConferenceRoom",
    data(){
        return{
            getByEmpName:"",
        }
    },
    methods:{
        // getByEmpName(){},
        join(){},
    }
})
</script>

<style scoped>
*{
    margin: 0px;
    padding: 0px;
}
.header{
    width: 975px;
    height: 60px;
    line-height: 60px;
    position: relative;
    background-color: rgb(252, 252, 252);
}
.chat-pic{
    display: inline-block;
    width: 100px;
    height: 40px;
    font-size: 18px;
    color:white;
    line-height: 40px;
    text-align: center;
    border-radius: 5px;
    margin-left: 30px;
    background-color: #2196F3;
}
.chat-search{
    display: inline-block;
    height: 40px;
    line-height: 40px;
    width: 650px;
    margin-left: 30px;
    border-radius:5px;
    background-color: rgb(241, 238, 238);
    border: none;
}
.chat-msg{
    display: inline-block;
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;
    text-align: center;
    margin-left: 30px;
    font-size: 15px;
    /* background-color: violet; */
}
.chat-msg-1{
    text-decoration: none;
    color: black;
}
.meeting{
    width: 975px;
    height: 140px;
    /* background-color: burlywood; */
}
.meet-title{
    /* background-color: rgb(97, 67, 29); */
    padding-left: 18px;
    padding-top: 10px;
}
.meet-reminder{
    position: relative;
    width: 950px;
    margin-left: 12px;
    height: 85px;
    border-radius: 5px;
    margin-top: 10px;
    background-color: #2196F3;
}
.meet-num{
    position: relative;
    top: 12px;
    left: 20px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border: 3px solid rgb(184, 184, 184);
    border-radius: 50%;
    text-align: center;
    font-size: 25px;
    background-color: rgb(44, 241, 120);
}
.meet-reminder p:nth-child(2){
    position: relative;
    top: -55px;
    left: 90px;
    width: 200px;
    height: 40px;
    color: white;
    line-height: 40px;
    font-size: 14px;    
}
.meet-reminder p:nth-child(3){
    position: relative;
    top: -70px;
    left: 90px;
    width: 200px;
    height: 40px;
    color: white;
    line-height: 40px;
    font-size: 10px;    
}
.meet-reminder p:nth-child(4){
    position: relative;
    top: -110px;
    left: 190px;
    width: 200px;
    height: 40px;
    color: white;
    line-height: 40px;
    font-size: 10px;    
}
.meet-reminder p:nth-child(5){
    position: relative;
    top: -130px;
    left: 90px;
    width: 200px;
    height: 40px;
    color: white;
    line-height: 40px;
    font-size: 10px; 
    opacity: 0.5;   
}
.join{
    width: 120px;
    height: 30px;
    line-height: 30px;
    border: none;
    border-radius: 5px;
    position: relative;
    top: -190px;
    left: 800px;
    font-size: 12px;
    color: rgb(160, 159, 159);
    background-color: rgb(236, 236, 236);
}
.join:hover{
    background-color: white;
    color: black;
}

.meetNow{
    width: 975px;
    height: 260px;
    /* background-color: burlywood; */
}
.meetNow-title{
    /* background-color: rgb(97, 67, 29); */
    padding-left: 18px;
    padding-top: 10px;
}
.meetNow ul{
    list-style: none;
}
.meetNow ul li{
    float: left;
    width: 150px;
    height: 200px;
    margin-left: 30px;
    margin-top: 10px;
    border-radius: 5px;
    background-color: cadetblue;
}
.meetNow ul li:hover{
    position: relative;
    top: -2px;
    left: -2px;
}
.meetNow ul li:nth-child(1){
    background-image: url("/src/assets/meeting/meet1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.meetNow ul li:nth-child(2){
    background-image: url("/src/assets/meeting/meet2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.meetNow ul li:nth-child(3){
    background-image: url("/src/assets/meeting/meet1.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.meetNow ul li:nth-child(4){
    background-image: url("/src/assets/meeting/meet2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.meetNow ul li:nth-child(5){
    background-image: url("/src/assets/meeting/meet-new.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.meetTemplate{
    width: 950px;
    height: 140px;
    margin-left: 10px;
    /* background-color: cadetblue; */
}
.meetTemplate p{
    width: 100px;
    text-align: center;
    display: inline-block;
}
.meetTemplate button{
    background-color: #2196F3;
    color: white;
    display: inline-block;
    width:100px;
    height:30px; 
    line-height:30px;
    margin-top: 4px;
    border:none;
    border-radius:5px;
    margin-left: 740px;
}
.meetTemplate ul{
    list-style: none;
}
.meetTemplate ul li{
    width: 950px;
    height: 50px;
    line-height: 50px;
    background-color: rgb(255, 255, 255);
    margin-top: 5px;
    border-radius: 5px;
    padding-left: 20px;
}
.meetTemplate ul li p:nth-child(1){
    color: black;
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    width: 160px;
}
.meetTemplate ul li p:nth-child(2){
    color: rgb(158, 157, 157);
    font-size: 12px;
    display: inline-block;
    width: 450px;
}
#bianji{
    background-color: white;
    color:black;
    border: 2px solid rgb(206, 206, 206);
    width: 60px;
    height: 30px;
    line-height: 30px;
    position: relative;
    top: -48px;
    left: -30px;
    font-size: 13px;
}
#bianji:hover{
    background-color: orange;
    color: white;
}
#shanchu{
    background-color: white;
    color:black;
    border: 2px solid rgb(206, 206, 206);
    width: 60px;
    height: 30px;
    line-height: 30px;
    position: relative;
    top: -98px;
    left: 45px;
    font-size: 13px;
}
#shanchu:hover{
    background-color: red;
    color: white;
}
#yuyue{
    background-color: rgb(92, 194, 97);
    color:rgb(250, 250, 250);
    border: 2px solid rgb(206, 206, 206);
    width: 60px;
    height: 30px;
    line-height: 30px;
    position: relative;
    top: -148px;
    left: 120px;
    font-size: 13px;
}
#yuyue:hover{
    background-color: green;

}
</style>